<template>
  <div class="container">
    <div ref="main" class="echart1" />
    <div style="  margin-left:80px;">
      <h4 style="text-align:center">每日营业额统计表</h4>
      <el-form
        ref="form"
        :model="form"
        label-width="150px"
        :inline="true"
        style="margin-top:40px;margin-left:10px"
      >
        <el-form-item label="请选择时间段">
          <el-col :span="11">
            <el-date-picker
              value-format="yyyy-MM-dd HH:mm:ss"
              v-model="form.checkinDate"
              type="datetime"
              placeholder="请选择开始时间"
              style="width: 90%"
            >
            </el-date-picker>
          </el-col>
          <el-col :span="2">——</el-col>
          <el-col :span="11">
            <el-date-picker
              value-format="yyyy-MM-dd HH:mm:ss"
              v-model="form.checkoutDate"
              type="datetime"
              placeholder="请选择结束时间"
              style="width: 90%"
            >
            </el-date-picker>
          </el-col>
        </el-form-item>
        <el-button type="primary" @click="ComfirmScope">确定</el-button>
      </el-form>
      <div ref="charts" class="echart2" />
    </div>
  </div>
</template>

<script>
import { countByRoomTypeId } from "../api/checkin.js";
import { lineChartsScope } from "../api/echarts.js";
export default {
  name: "Dashboard",
  data() {
    return {
      form: {
        checkinDate: undefined,
        checkoutDate: undefined
      },
      lineData: [
        ["2022-4-1", 200],
        ["2022-4-2", 560],
        ["2022-4-3", 750],
        ["2022-4-4", 580],
        ["2022-4-5", 250],
        ["2022-4-6", 300],
        ["2022-4-7", 450],
        ["2022-4-8", 300]
      ]
    };
  },
  created() {},
  mounted() {
    countByRoomTypeId().then(response => {
      console.log(response);
      const pieData = response.data.data;
      this.initEcharts(pieData);
    });

    this.initEchartsLine(this.lineData);
  },
  methods: {
    initEcharts(pieData) {
      var myChart = this.$echarts.init(this.$refs.main);
      var option = {
        title: {
          text: "房型交易统计",
          subtext: "房型受欢迎程度分析",
          left: "center"
        },
        tooltip: {
          trigger: "item"
        },
        legend: {
          orient: "vertical",
          left: "left"
        },
        series: [
          {
            name: "总计",
            type: "pie",
            radius: "50%",
            data: pieData,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)"
              }
            }
          }
        ]
      };
      option && myChart.setOption(option);
    },
    //输入查询的时间范围
    ComfirmScope() {
      console.log(this.form);
      lineChartsScope(this.form)
        .then(resp => {
          if (resp.data.code == "200") {
            this.lineData = [];
            resp.data.data.map(item => {
              this.lineData.push([item.date, item.inCome]);
            });
            console.log(this.lineData);
            this.initEchartsLine(this.lineData);
            this.$message({
              type: "success",
              message: "成功!"
            });
            // location.reload();
          } else {
            this.$message.error(resp.data);
          }
        })
        .catch(error => {
          // 错误分为 status-请求错误 和 code-账号密码错误
          this.$message.error(error);
          console.log(error);
        });
    },
    // lineData
    initEchartsLine(lineData) {
      var myLineChart = this.$echarts.init(this.$refs.charts);
      var option = {
        xAxis: {
          type: "category",
          boundaryGap: false
        },
        yAxis: {
          type: "value"
        },
        series: [
          {
            data: lineData,
            type: "line"
          }
        ]
      };
      option && myLineChart.setOption(option);
    }
  }
};
</script>
<style>
.container {
  width: 1600px;
  height: 700px;
  position: relative;
  display: flex;
  flex-direction: row;
}
.echart1 {
  width: 700px;
  height: 700px;
  margin: 0 auto;
}
.echart2 {
  width: 700px;
  height: 400px;
  margin: 0 auto;
}
</style>
